<template>
  <div class="main">
    <h1>{{message}}</h1>
    <el-table :data="admins" :row-class-name="tableRowClassName">
      <el-table-column  label="头像" width="80">
        <template slot-scope="scope">
          <img :src="getImgUrl(scope.row.adhead)" style="width:40px;height: 40px">
        </template>
      </el-table-column>
      <el-table-column prop="adname" label="姓名" width="100px"></el-table-column>
      <el-table-column prop="adsex" label="性别" width="100px"></el-table-column>
      <el-table-column prop="adnickname" label="别名" width="100px"></el-table-column>
      <el-table-column prop="adphone" label="电话号码" width="120px"></el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="180px"></el-table-column>
      <el-table-column prop="updatetime" label="更新时间" width="150px"   :formatter="dateFormat"></el-table-column>

      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditAdmin(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="currPageChange"
      :current-page.sync="currPage"
      :pageSize="pageInfo.pageSize"
      :total="pageInfo.itemCount">
    </el-pagination>
    <el-col :span="20">&nbsp</el-col>
    <el-col :span="4">
      <el-button @click="showAddAdmin">新增用户</el-button>
    </el-col>
    <add :addDialogIsShow="addDialogIsShow" @closeAddDialog="closeAddDialog" @getAdminByPage="getAdminByPage" ref="showAddAdmin"/>
    <edit :editDialogIsShow="editDialogIsShow" @closeEditDialog="closeEditDialog" @getAdminByPage="getAdminByPage" ref="showEditAdmin"/>
  </div>
</template>

<script>
import api from "../../../../../axios/api.js"
import moment from 'moment'
import add from '@/components/back/management/admin/add.vue'
import edit from '@/components/back/management/admin/edit.vue'
export default {
  name: "list",
  components:{add,edit},
  data(){
    return {
      admins:[],
      admin:[],
      message:"管理员列表",
      currPage:1,
      pageInfo:{"pageSize":5,"currPage":1},
      addDialogIsShow : false,//默认增加子组件不现实
      editDialogIsShow : false,//默认增加子组件不现实
    }
  },
  methods:{
    getImgUrl: function (imgsrc) {
      return "../../../../../static/images/admin/upload/head/" + imgsrc;
    },
    getAdminByPage:function () {
      api.setDataFromAxios("/api/administratorsController/getAdminsByPage",{"currPage":this.currPage,"pageSize":this.pageInfo.pageSize},"post",null).then(
        //默认返回就是response对象
        dto=>{
          console.log(dto.tList);
          this.admins = dto.tList;
          console.log(dto.obj)
          this.pageInfo = dto.obj;
        }
      );
    },
    handleEditAdmin(index,admin){
      let _this = this;//检查点,判断子组件的init方法是否被正确调用
      this.$nextTick(()=>{
        _this.$refs.showEditAdmin.initEditAdmin(admin);
      });
      this.editDialogIsShow = true;//修改父组件变量 设置给子组件显示
    },
    handleDelete(index,admin){
      const _this = this;
      api.setDataFromAxios("/api/administratorsController/deleteAdminById/" + admin.adid,null,"get",null).then(
        //默认返回就是response对象
        dto=>{
           this.$message.success("删除成功！");
           _this.getAdminByPage();
        }
      );
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      } else {
        return '';
      }
      return '';
    },
    dateFormat:function(row,column){

      var date = row[column.property];

      if(date == undefined){return ''};

      return moment(date).format("YYYY-MM-DD HH:mm:ss")

    },
    currPageChange:function () {
      this.getAdminByPage();//当用户选择页码，选中的页码自动同步给currPage，再调用重新分页查询当前页方法
    },
    closeAddDialog(){
      this.addDialogIsShow = false;
    },
    showAddAdmin(){
      this.addDialogIsShow = true;
    },
    closeEditDialog(){
      this.editDialogIsShow = false;
    },
    showEditAdmin(){
      this.editDialogIsShow = true;
    }
  },
  created() {
    this.getAdminByPage();
  }
}
</script>


<style scoped lang="stylus">
  .main
   width 1000px
   margin 0 auto
  /deep/ table
         text-align center
         width 800px
         margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
</style>
